<template>
  <div class="bh-container">
    <a-tabs v-model:active-key="activeKey"
            type="rounded"
            size="medium"
            position="left"
            :lazy-load="true">
      <a-tab-pane :key="item.key" :title="item.title" v-for="item in renderData">
         <component :is="item.component"></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">

import BaseConfig from './component/base.vue'
import AboutConfig from './component/about.vue'
const activeKey = ref('web');

interface PaneList {
  key: string,
  title: string,
  component: any,
}

const renderData = [
  {
    key: 'web',
    title: '网站设置',
    component: BaseConfig
  },
  {
    key: 'about',
    title: '关于',
    component: AboutConfig
  },
] as PaneList[];

</script>

<style scoped lang="less">
.bh-container {
  background: var(--color-bg-2);
  margin: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
}

:deep(.arco-tabs-nav-tab-list) {
  width: 88px;
}

:deep(.arco-tabs-pane) {
  border-left: 1px var(--color-neutral-3) solid;
}

:deep(.arco-tabs-tab) {
  user-select: none;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}
:deep(.arco-card-bordered){
   border:none ;

}
</style>